<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>父子组件传递复杂数据</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <my-list :items="lessons"></my-list>
</div>
<script type="text/javascript">
    const myList = {
        template: `
          <ul>
          <li v-for="item in items" :key="item.id">
            {{ item.id }},{{ item.name }}
          </li>
          </ul>
        `,
        //接收父组件的属性
        props: {
            items: {
                //数据类型,Array表示数组,Object表示对象
                type: Array,
                //默认值
                default: []
            }
        }
    };
    const app = new Vue({
        el: "#app",
        data: {
            msg: "父组件的msg属性数据内容",
            lessons: [
                {"id": 1, "name": "Java"},
                {"id": 2, "name": "Python"},
                {"id": 3, "name": "C++"}
            ]
        },
        components: {
            //可以直接简写成myList,这是ES6中的规范
            //注意:组件名如果有大写,使用时注意要改成my-list
            myList: myList
        }
    });
</script>
</body>
</html>